<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
	
	<h:head>
		<title>Distribuidora Frutos del Campo</title>
		<link rel="stylesheet" type="text/css" media="screen"
			href="../css/hojaDeEstilos.css" />
		<meta charset="utf-8" />
	</h:head>
	<h:body>
		<div id='contenido'>
			<header>
				<hgroup>
					<a href="../home.xhtml"> <img src="../imagenes/tituloPagina.jpg" /></a>
					<h2>Gestión de Compras</h2>
				</hgroup>
				<hr />
				<br />
				<hgroup>
	
					<h:form>
						<!-- Menu -->
						<p:menubar autoDisplay="false">
	
							<p:menuitem value="Registrar"
								action="#{facturaCompraBean.visibilizarRegistrar}"
								update=":formularioBusqueda :formularioRegistro :formularioEdicion" />
	
							<p:menuitem value="Buscar"
								action="#{facturaCompraBean.visibilizarBuscar}"
								update=":formularioBusqueda :formularioRegistro :formularioEdicion" />
						</p:menubar>
					</h:form>
				</hgroup>
				<hr />
			</header>

		<section>
			<div id='textoPrincipal'>


				<!-- Panel de Busqueda -->
				<div class="row-fluid" align="center">
					<h:form id="formularioBusqueda">

						<div class="span12" align="left">
							<p:panel id="buscar" header="Buscar Compras"
								visible="#{facturaCompraBean.panelBuscarVisibilidad}">

								<h:panelGrid id="panelBusqueda" columns="4" cellpadding="5">

									<h:outputLabel for="codigo" value="Codigo: " />
									<p:inputText value="#{facturaCompraBean.codigoBuscar}"
										id="codigo" label="Codigo " />

									<h:outputLabel for="tipo" value="Tipo: " />
									<p:inputText value="#{facturaCompraBean.tipoBuscar}" id="tipo"
										label="Tipo " />

									<h:outputLabel for="estado" value="Estado: " />
									<p:inputText value="#{facturaCompraBean.estadoBuscar}"
										id="estado" label="Estado " />

									<h:outputLabel for="fechaDesde" value="Desde la fecha: " />
									<p:calendar value="#{facturaCompraBean.fechaDesdeBuscar}"
										id="fechaDesde" />

									<h:outputLabel for="fechaHasta" value="Hasta la fecha: " />
									<p:calendar value="#{facturaCompraBean.fechaHastaBuscar}"
										id="fechaHasta" />

								</h:panelGrid>

								<p:commandButton id="buscarButton" value="Buscar"
									action="#{facturaCompraBean.buscarCompra}"
									update="panelBusqueda comprasTabla" />

							</p:panel>
						</div>

						<div class="span12" align="left">
							<p:panel id="mostrar" header="Compras Encontrados" visible="#{facturaCompraBean.panelBuscarVisibilidad}">

								<p:outputPanel id="comprasTabla">
									<p:dataTable id="dataTable" var="facturaCompra"
										value="#{facturaCompraBean.compras}" widgetVar="comprasTable"
										rowKey="#{facturaCompra.codigo}"
										selection="#{facturaCompraBean.compraSeleccionado}"
										selectionMode="single">

										<p:column id="codigoColumn" headerText="Codigo"
											sortBy="codigo">
											<h:outputText value="#{facturaCompra.codigo}" />
										</p:column>

										<p:column id="proveedorColumn" headerText="Proveedor"
											sortBy="codigo">
											<h:outputText value="#{facturaCompra.proveedor.codigo}" />
										</p:column>

										<p:column id="totalColumn" headerText="Total" sortBy="total">
											<h:outputText value="#{facturaCompra.total}" />
										</p:column>

										<p:column id="detallesColumn" style="width:10%"
											headerText="Detalles" footerText=" ">
											<p:commandButton id="selectButton"
												style="margin:1px; padding:1px; width: 25px; height: 25px; left:25%"
												update=":formularioBusqueda :display :pagosTabla :lotesTabla"
												oncomplete="PF('detalles').show()"
												icon="ui-icon-arrow-4-diag">
												<f:setPropertyActionListener value="#{facturaCompra}"
													target="#{facturaCompraBean.compraSeleccionadoDetalles}" />
											</p:commandButton>
										</p:column>
									</p:dataTable>
								</p:outputPanel>

								<p:commandButton id="editarButton" value="Editar"
									update=":formularioEdicion :formularioRegistro :formularioBusqueda"
									action="#{facturaCompraBean.editarCompra}" />

								<p:commandButton id="eliminarButton" value="Eliminar"
									action="#{facturaCompraBean.eliminarCompra}"
									update="comprasTabla :formularioEdicion :formularioRegistro">
									<p:confirm header="Confirmacion de eliminacion"
										message="Esta seguro que quiere eliminar este compra?"
										icon="ui-icon-alert" />
								</p:commandButton>

								<p:confirmDialog global="true" showEffect="fade"
									hideEffect="explode">
									<p:commandButton value="Si" type="button"
										styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
									<p:commandButton value="No" type="button"
										styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
								</p:confirmDialog>
							</p:panel>
						</div>
					</h:form>

					<!-- Dialogo para cuando se apreta el Boton de Detalles de compra -->
					<p:dialog header="Detalles del Compra" widgetVar="detalles"
						position="top" resizable="false" id="compraDetalles"
						showEffect="fade" hideEffect="explode" modal="true">

						<p:outputPanel id="panelDetalles">
							<h:panelGrid id="display" columns="2" cellpadding="4"
								style="margin:0 auto;">

								<f:facet name="header">
									<p>Datos:</p>
								</f:facet>

								<h:outputText value="Codigo: " />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.codigo}"
									style="font-weight:bold" />

								<h:outputText value="Comentario " />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.comentario}"
									style="font-weight:bold" />

								<h:outputText value="Estado: " />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.estado}"
									style="font-weight:bold" />

								<h:outputText value="Tipo: " />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.tipo}"
									style="font-weight:bold" />

								<h:outputText value="Total: " />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.total}"
									style="font-weight:bold" />

								<h:outputText value="Fecha:" />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.fecha}"
									id="fecha" style="font-weight:bold">
									<f:convertDateTime pattern="d/M/yyyy" />
								</h:outputText>

								<h:outputText value="Proveedor: " />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.proveedor.codigo}"
									style="font-weight:bold" />

								<h:outputText value="Empleado: " />
								<h:outputText
									value="#{facturaCompraBean.compraSeleccionadoDetalles.empleadoDeCompra.codigo}"
									style="font-weight:bold" />

							</h:panelGrid>



							<p:outputPanel id="pagosTabla" style="width:50%">

								<h:outputText value="Pagos realizados: " />
								<p:dataTable id="dataTable" var="pago"
									value="#{facturaCompraBean.compraSeleccionadoDetalles.pagos}"
									widgetVar="pagosTable" rowKey="#{pago.codigo}">

									<p:column id="codigoColumn" headerText="Codigo" sortBy="codigo">
										<h:outputText value="#{pago.codigo}" />
									</p:column>

									<p:column id="montoColumn" headerText="Monto" sortBy="monto">
										<h:outputText value="#{pago.monto}" />
									</p:column>

									<p:column id="fechaColumna" headerText="Fecha de pago"
										sortBy="fecha">
										<h:outputText value="#{pago.fecha}" id="fechaCobro">
											<f:convertDateTime pattern="d/M/yyyy" />
										</h:outputText>
									</p:column>

								</p:dataTable>
							</p:outputPanel>

							<p:outputPanel id="lotesTabla" style="width:50%">
								<h:outputText value="Lotes de la factura: " />
								<p:dataTable id="dataTable2" var="loteDeCompra"
									value="#{facturaCompraBean.compraSeleccionadoDetalles.lotesDeComra}"
									widgetVar="lotesTable" rowKey="#{loteDeCompra.codigo}">

									<p:column id="codigoColumn" headerText="Codigo" sortBy="codigo">
										<h:outputText value="#{loteDeCompra.codigo}" />
									</p:column>

									<p:column id="productoColumn" headerText="Producto"
										sortBy="nombre">
										<h:outputText value="#{loteDeCompra.producto.nombre}" />
									</p:column>

									<p:column id="precioColumn" headerText="Precio de compra"
										sortBy="precioDeCompra">
										<h:outputText value="#{loteDeCompra.precioDeCompra}" />
									</p:column>

									<p:column id="cantidadColumn" headerText="Cantidad de compra"
										sortBy="cantidadDeCompra">
										<h:outputText value="#{loteDeCompra.cantidadDeCompra}" />
									</p:column>

								</p:dataTable>
							</p:outputPanel>
						</p:outputPanel>

						<h:commandButton id="imprimirButton" value="Imprimir"
							type="button"
							styleClass="ui-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-c"
							icon="ui-icon-print">
							<p:printer target="panelDetalles" />
						</h:commandButton>

					</p:dialog>
				</div>


				<!-- Panel de Edicion -->
				<div class="row-fluid" align="center">
					<h:form id="formularioEdicion">

						<div class="span12" align="left">
							<p:panel id="editar" header="Edicion de Factura de Compra"
								visible="#{facturaCompraBean.panelEditarVisibilidad}">

								<h:panelGrid columns="6" cellpadding="5">

									<h:outputLabel for="codigo" value="Codigo: " />
									<p:inputText
										value="#{facturaCompraBean.compraSeleccionado.codigo}"
										id="codigo" required="true" label="Codigo " />

									<h:outputLabel for="comentario" value="Comentario: " />
									<p:inputText
										value="#{facturaCompraBean.compraSeleccionado.comentario}"
										id="comentario" required="true" label="Comentario " />

									<h:outputLabel for="estado" value="Estado: " />
									<p:inputText
										value="#{facturaCompraBean.compraSeleccionado.estado}"
										id="estado" required="true" label="Estado " />

									<h:outputLabel for="tipo" value="Tipo: " />
									<p:inputText
										value="#{facturaCompraBean.compraSeleccionado.tipo}" id="tipo"
										required="true" label="Tipo " />

									<h:outputLabel for="fecha" value="Fecha: " />
									<p:calendar
										value="#{facturaCompraBean.compraSeleccionado.fecha}"
										id="fecha" required="true" />

									<h:outputLabel for="comboProveedor" value="Proveedor: " />
									<p:selectOneMenu id="comboProveedor"
										value="#{facturaCompraBean.compraSeleccionado.proveedor}"
										converter="proveedorConverter" effect="fade"
										label="Proveedor ">
										<f:selectItem itemLabel="#{facturaCompraBean.nombreProveedor}"
											itemValue="" />
										<f:selectItems value="#{facturaCompraBean.proveedores}"
											var="proveedor" itemValue="#{proveedor}"
											itemLabel="#{proveedor.codigo}" />
									</p:selectOneMenu>

								</h:panelGrid>

								<p:panel id="panelLotesPrincipalEditar" header="Editar Lotes">
									<h:panelGrid columns="2" cellpadding="5">

										<h:outputLabel for="lotesEditar" value="Lotes de Compra: " />

										<p:commandButton id="visibilidadLotesEditarButton"
											value="Editar Lotes"
											action="#{facturaCompraBean.visibilidadLotesEditar}"
											update="panelLotesEditar"
											process="panelLotesPrincipalEditar" />
									</h:panelGrid>

									<p:panel id="panelLotesEditar" styleClass="panelSinBorde"
										visible="#{facturaCompraBean.panelLotesEditarVisibilidad}">


										<h:panelGrid columns="1" cellpadding="5">
											<p:pickList id="lotesEditar"
												value="#{facturaCompraBean.lotes}" var="loteDeCompra"
												itemValue="#{loteDeCompra}"
												itemLabel="#{loteDeCompra.codigo}"
												converter="loteDeCompraConverter">

												<f:facet name="sourceCaption">Disponibles</f:facet>
												<f:facet name="targetCaption">Insertados</f:facet>

												<p:ajax event="transfer"
													listener="#{facturaCompraBean.transferirLotes}" />

												<p:column style="width:50%;"> 
													#{loteDeCompra.codigo}  
        										</p:column>

												<p:column style="width:50%;"> 
													#{loteDeCompra.cantidadDeCompra*loteDeCompra.precioDeCompra}  
        										</p:column>

											</p:pickList>
										</h:panelGrid>

										<h:panelGrid id="botonTotalEditar" columns="2" cellpadding="5"
											margin="0">
											<h:outputLabel value=" " style="width:440px" />
											<p:commandButton id="totalEditarButton"
												value="Calcular Total"
												style="margin:1px; padding:1px; height: 40px;"
												actionListener="#{facturaCompraBean.calcularTotalEditar}"
												process="panelLotesEditar" update="botonTotalEditar" />
										</h:panelGrid>
									</p:panel>
								</p:panel>


								<p:panel id="panelPagosPrincipalEditar"  header="Editrar Lotes">
									<h:panelGrid columns="2" cellpadding="5">

										<h:outputLabel for="pagosEditar" value="Lista de Pagos: " />

										<p:commandButton id="visibilidadPagosButtonEditar"
											value="Editar Pagos"
											action="#{facturaCompraBean.visibilidadPagosEditar}"
											update="panelPagosEditar"
											process="panelPagosPrincipalEditar" />

									</h:panelGrid>

									<p:panel id="panelPagosEditar" styleClass="panelSinBorde"
										visible="#{facturaCompraBean.panelPagosEditarVisibilidad}">
										<h:panelGrid columns="1" cellpadding="5">
											<p:pickList id="pagosEditar"
												value="#{facturaCompraBean.pagos}" var="pago"
												itemValue="#{pago}" itemLabel="#{pago.codigo}"
												converter="pagoConverter">

												<f:facet name="sourceCaption">Disponibles</f:facet>
												<f:facet name="targetCaption">Insertados</f:facet>

												<p:ajax event="transfer"
													listener="#{facturaCompraBean.transferirPagos}" />

												<p:column style="width:50%;"> 
													#{pago.codigo}  
        										</p:column>

												<p:column style="width:50%;"> 
													#{pago.monto}  
        										</p:column>

											</p:pickList>
										</h:panelGrid>

									</p:panel>
								</p:panel>

								<p:commandButton id="editarButton" value="Guardar"
									update=":formularioBusqueda :formularioEdicion :formularioRegistro"
									action="#{facturaCompraBean.actualizarCompra}"
									disabled="#{empty facturaCompraBean.compraSeleccionado}" />

								<p:commandButton id="volverButton" value="Volver"
									update=":formularioBusqueda :formularioEdicion :formularioRegistro"
									action="#{facturaCompraBean.volverBusqueda}" />

							</p:panel>

						</div>
					</h:form>
				</div>


				<!-- Panel de Registro -->
				<div class="row-fluid" align="center">
					<h:form id="formularioRegistro">
						<div class="span12" align="left">

							<p:panel id="registrar" header="Registro de Facturas de Compra"
								visible="#{facturaCompraBean.panelRegistrarVisibilidad}">

								<h:panelGrid id="panel" columns="6" cellpadding="5">

									<h:outputLabel for="codigo" value="Codigo: " />
									<p:inputText value="#{facturaCompraBean.codigoRegistrar}"
										id="codigo" required="true" label="Codigo " />

									<h:outputLabel for="comentario" value="Comentario: " />
									<p:inputText value="#{facturaCompraBean.comentarioRegistrar}"
										id="comentario" required="true" label="Comentario " />

									<h:outputLabel for="estado" value="Estado: " />
									<p:inputText value="#{facturaCompraBean.estadoRegistrar}"
										id="estado" required="true" label="Estado " />

									<h:outputLabel for="tipo" value="Tipo: " />
									<p:inputText value="#{facturaCompraBean.tipoRegistrar}"
										id="tipo" required="true" label="Tipo " />


									<h:outputLabel for="fecha" value="Fecha: " />
									<p:calendar value="#{facturaCompraBean.fechaRegistrar}"
										id="fecha" required="true" />

									<h:outputLabel for="comboProveedor" value="Proveedor: " />
									<p:selectOneMenu id="comboProveedor" required="true"
										value="#{facturaCompraBean.proveedorSeleccionadoRegistrar}"
										converter="proveedorConverter" effect="fade"
										label="Proveedor ">
										<f:selectItem itemLabel="Seleccionar uno" itemValue="" />
										<f:selectItems value="#{facturaCompraBean.proveedores}"
											var="proveedor" itemValue="#{proveedor}"
											itemLabel="#{proveedor.codigo}" />
									</p:selectOneMenu>

								</h:panelGrid>

								<p:panel id="panelLotesPrincipal" header="Registrar Lotes">
									<h:panelGrid columns="2" cellpadding="5">

										<h:outputLabel for="lotesRegistrar" value="Lotes de Compra: " />

										<p:commandButton id="visibilidadLotesButton"
											value="Cargar Lotes"
											action="#{facturaCompraBean.visibilidadLotes}"
											update="panelLotes" process="panelLotesPrincipal" />
									</h:panelGrid>

									<p:panel id="panelLotes" styleClass="panelSinBorde"
										visible="#{facturaCompraBean.panelLotesVisibilidad}">
										<h:panelGrid id="panelGridLotes" columns="2" cellpadding="5">
											<p:pickList id="lotesRegistrar"
												value="#{facturaCompraBean.lotesRegistrar}"
												var="loteDeCompra" itemValue="#{loteDeCompra}"
												itemLabel="#{loteDeCompra.codigo}"
												converter="loteDeCompraConverter" showSourceFilter="true"
												showTargetFilter="true" filterMatchMode="contains">

												<f:facet name="sourceCaption">Disponibles</f:facet>
												<f:facet name="targetCaption">Insertados</f:facet>

												<p:ajax event="transfer"
													listener="#{facturaCompraBean.transferirLotes}" />

												<p:column style="width:50%;"> 
													#{loteDeCompra.codigo}  
        										</p:column>

												<p:column style="width:50%;"> 
													#{loteDeCompra.cantidadDeCompra*loteDeCompra.precioDeCompra}  
        										</p:column>

											</p:pickList>
										</h:panelGrid>

										<h:panelGrid id="botonTotal" columns="2" cellpadding="5"
											margin="0">
											<h:outputLabel value=" " style="width:440px" />
											<p:commandButton id="totalButton" value="Calcular Total"
												style="margin:1px; padding:1px; height: 40px;"
												actionListener="#{facturaCompraBean.calcularTotal}"
												process="panelLotes" update="botonTotal" />
										</h:panelGrid>
									</p:panel>
								</p:panel>

								<p:panel id="panelPagosPrincipal" header="Registrar Pagos">
									<h:panelGrid columns="2" cellpadding="5">

										<h:outputLabel for="pagosRegistrar" value="Lista de Pagos: " />

										<p:commandButton id="visibilidadPagosButton"
											value="Cargar Pagos"
											action="#{facturaCompraBean.visibilidadPagos}"
											update="panelPagos" process="panelPagosPrincipal" />
									</h:panelGrid>


									<p:panel id="panelPagos" styleClass="panelSinBorde"
										visible="#{facturaCompraBean.panelPagosVisibilidad}">
										<h:panelGrid columns="1" cellpadding="5">
											<p:pickList id="pagosRegistrar"
												value="#{facturaCompraBean.pagosRegistrar}" var="pago"
												itemValue="#{pago}" itemLabel="#{pago.codigo}"
												converter="pagoConverter" showSourceFilter="true"
												showTargetFilter="true" filterMatchMode="contains">

												<f:facet name="sourceCaption">Disponibles</f:facet>
												<f:facet name="targetCaption">Insertados</f:facet>

												<p:ajax event="transfer"
													listener="#{facturaCompraBean.transferirPagos}" />

												<p:column style="width:50%;"> 
													#{pago.codigo}  
        										</p:column>

												<p:column style="width:50%;"> 
													#{pago.monto}  
        										</p:column>

											</p:pickList>
										</h:panelGrid>
									</p:panel>
								</p:panel>


								<p:commandButton id="regiButton" value="Registrar"
									action="#{facturaCompraBean.registrarCompra}"
									update=":formularioRegistro" />
							</p:panel>
						</div>
					</h:form>

				</div>
			</div>
		</section>
	</div>

</h:body>
</html>